<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8"/>
        <title>services</title>
    </head>

    <body>
        <div th:include="top :: html"></div>
        <div class="contentDiv">
            <table class="table table-hover table-condensed">
                <legend>
                    <strong>services</strong>
                </legend>
                <thead>
                    <tr>
                        <th>name</th>
                        <th>host</th>
                        <th>protocol</th>
                        <th>port</th>
                        <th>path</th>
                        <th>created_at</th>
                        <th>updated_at</th>
                        <th>connect_timeout</th>
                        <th>read_timeout</th>
                        <th>write_timeout</th>
                        <th>retries</th>
                        <th>operate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="service : ${services}">
                        <th scope="row" th:text="${service.name}"></th>
                        <td th:text="${service.host}"></td>
                        <td th:text="${service.protocol}"></td>
                        <td th:text="${service.port}"></td>
                        <td th:text="${service.path}"></td>
                        <td th:text="${#dates.format(service.created_at * 1000, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td th:text="${#dates.format(service.updated_at * 1000, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td th:text="${service.connect_timeout}"></td>
                        <td th:text="${service.read_timeout}"></td>
                        <td th:text="${service.write_timeout}"></td>
                        <td th:text="${service.retries}"></td>
                        <td>
                            <a class="btn btn-info" th:href="@{/kong/routes(service=${service.id})}">routes</a>
                            <a class="btn btn-info" th:href="@{/kong/plugins(service=${service.id})}">plugins</a>
                            <a class="btn btn-primary" th:href="@{'/kong/services/'+${service.id}}">update</a>
                            <a class="btn btn-danger btn-delete" href="javascript:void(0)" th:value="${service.id}">delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div><a class="btn btn-primary" href="/kong/services/add" role="button">add service</a></div>
        </div>
        <script type="application/javascript">
            $(function(){
                $('.btn-delete').click(function(){
                    if(!confirm("Make sure to delete this?")){
                        return;
                    }
                    var service_id = $(this).attr('value');
                    var url = "/kong/services/"+service_id + "/del";
                    $.ajax({
                        url: url,
                        async: false,
                        type: "delete",
                        success: function(){
                            window.location.reload();
                        },
                        error: function(e){
                            alert(e.message);
                            window.location.reload();
                        }
                    })
                });
            })
        </script>
    </body>
</html>